<template>
  <view class="worry">
    <view
      v-for="(item, index) in conversation"
      :key="index"
      @click="toChat(item)"
    >
      <msgList v-if="item.conversationID" :conversation="item"></msgList>
      <view v-else class="no_chat_message_cell">
        <image
          :src="item.img"
          mode="aspectFit"
          style="width: 50px; height: 50px"
        ></image>
        <text style="margin-left: 10px">{{ "客服" + (index + 1) }}</text>
      </view>
    </view>
    <view v-if="conversation.length == 0" class="nolist"> 暂无客服 </view>
  </view>
</template>

<script>
import IM from "@/util/IM.js";
export default {
  data() {
    return {
      base_url: this.$base_url,
      conversation: [],
      isSDKReady: false,
      url: "",
    };
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(e) {
    //uni.showLoading();
    console.log(e);
    this.url = e.goodsdata;
    uni.showLoading({
      title: "登录中",
      mask: true,
    });
    IM.getUsersig((e) => {
      uni.hideLoading();
      if (!e) {
        uni.showToast({
          title: "登录失败",
          icon: "none",
        });
      }
    });

    uni.getStorage({
      key: "storeCallcenter",
      success: (res) => {
        this.conversation = res.data[0].callcenter_list;
      },
    });
    // type	String	im
    // img	String	https://uriwin.com/data/resource/img/type3.png
    // 	String	URIWIN0242
  },
  onShow() {
    //等待SDK加载完毕 再请求获取历史消息
    // uni.$on('isSDKReady', value => {
    //uni.hideLoading();
    setTimeout(() => {
      this.getConversationList();
      uni.$TUIKit.on(
        uni.$TUIKitEvent.CONVERSATION_LIST_UPDATED,
        this.onConversationListUpdated
      );
    }, 1000);
    // });
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
    uni.$TUIKit.off(uni.$TUIKitEvent.SDK_READY, this.onConversationListUpdated);
  },
  methods: {
    onConversationListUpdated(event) {
      //console.log(event);
      //this.conversation = event.datal;
    },
    getConversationList() {
      uni.$TUIKit.getConversationList().then((imResponse) => {
        console.log(imResponse.data.conversationList, "**********************");
        // this.conversation = imResponse.data.conversationList;
      });
    },
    toChat(item) {
      uni.navigateTo({
        url: `/plug/IM/chat?conversationID=${
          item.conversationID != null
            ? item.conversationID
            : "C2C" + item.member_name
        }&url=${this.url}`,
      });
    },
  },
};
</script>

<style scoped lang="scss">
.red {
  font-size: 28rpx;
  font-family: Source Han Sans CN;
  color: #fb0d1c;
}
.no_chat_message_cell {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f5f5f5;
  padding: 5px 10px;
}

.worry {
  width: 750rpx;
  background: #ffffff;
  border-top: 1px solid #ebebeb;

  .chat {
    width: 650rpx;
    height: 130rpx;
    margin: 30rpx auto;

    .chat-box {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;

      .left {
        width: 120rpx;
        height: 120rpx;
        position: relative;

        image {
          width: 120rpx;
          height: 120rpx;
          border-radius: 10px;
        }

        .origin {
          position: absolute;
          top: -5px;
          right: -5px;
          width: 28rpx;
          height: 28rpx;
          line-height: 28rpx;
          text-align: center;
          background: #fb0d1c;
          border-radius: 50%;
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #ffffff;
        }
      }

      .right {
        width: 550rpx;
        height: 100%;
        margin-left: 30rpx;
        border-bottom: 1px solid #ccc;

        .first {
          display: flex;
          justify-content: space-between;

          .name {
            font-size: 32rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;
          }

          .tiem {
            font-size: 24rpx;
            font-family: Source Han Sans CN;
            color: #333333;
          }
        }

        .center {
          font-size: 28rpx;
          font-family: Source Han Sans CN;
          color: #333333;
          margin-top: 10rpx;
        }
      }
    }
  }
}
</style>